<!--  -->
<template>
  <div>
    <div class="flex items-center text-lg">
      <div
        class="region-name cursor-pointer hover:underline decoration-sky-500 underline-offset-8"
        @click="returnToRegion"
      >
        {{ regionName }}
      </div>
      <div v-if="selectName != ''" class="flex items-center">
        <el-icon><ArrowRightBold /></el-icon>{{ selectName }}
      </div>
    </div>

    <div v-if="selectName == ''" class="w-full h-[490px] overflow-y-scroll orderBody">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="flex items-center py-3 px-5 text-xl cursor-pointer orderBody-item"
        :class="
          item.number > 150
            ? 'line-color-0'
            : item.number > 50
              ? 'line-color-1'
              : 'line-color-normal'
        "
        @click="moveToSelect(item)"
      >
        <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
        <div class="w-full">
          <div class="line-name flex justify-between">
            <div>{{ item.name }}</div>
            <div>{{ item.number }}</div>
          </div>
          <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
            <div
              class="line-inner h-2 rounded-lg"
              :style="{
                width: `${Math.floor((item.number / Math.max(...tableData.map((e) => e.number))) * 100)}%`
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="w-full h-[490px] overflow-y-scroll orderBody">
      <div
        v-for="(item, index) in tableData2"
        :key="index"
        class="flex items-center py-3 px-5 text-xl cursor-pointer orderBody-item"
        :class="
          item.value > 30 ? 'line-color-0' : item.value > 10 ? 'line-color-1' : 'line-color-2'
        "
      >
        <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
        <div class="w-full">
          <div class="line-name flex justify-between">
            <div>{{ item.tasktypename }}</div>
            <div>{{ item.value }}</div>
          </div>
          <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
            <div
              class="line-inner h-2 rounded-lg"
              :style="{
                width: `${Math.floor((item.value / Math.max(...tableData2.map((e) => e.value))) * 100)}%`
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import type { centerTaskByCodeResponse, CountryQhList } from '@/types/baseTypes'
import { ArrowRightBold } from '@element-plus/icons-vue'
import { groupBy, orderBy, reverse, sortBy, sum } from 'lodash'
import { onMounted, ref } from 'vue'
onMounted(() => {
  initDetail()
})
const props = defineProps<{
  selectPoint: CountryQhList
  regionName: string
}>()
const baseData = ref<
  {
    name: string
    number: number
    data: centerTaskByCodeResponse[]
  }[]
>([])
const tableData = ref<
  {
    name: string
    number: number
    data: centerTaskByCodeResponse[]
  }[]
>([])
const initDetail = () => {
  //根据选中点查询相关排行
  requestApi
    .GetCenterTaskTypeQhCountByAreaCode({ areacode: props.selectPoint.code })
    .then((res) => {
      //平铺的乡镇详情 res
      // tableData.value = res
      //根据大类名称分类
      const ans = groupBy(res, 'largetasktypename')
      // console.log(ans)
      let divAns: {
        name: string
        number: number
        data: centerTaskByCodeResponse[]
      }[] = []
      for (let key in ans) {
        divAns.push({
          name: key,
          data: ans[key],
          number: sum(ans[key].map((e) => e.value))
        })
      }
      baseData.value = reverse(sortBy(divAns, 'number'))
      tableData.value = reverse(sortBy(divAns, 'number'))
    })
}

const tableData2 = ref<centerTaskByCodeResponse[]>([])

const selectName = ref('')
const returnToRegion = () => {
  tableData.value = baseData.value
  selectName.value = ''
}
const moveToSelect = (data: { name: string; data: centerTaskByCodeResponse[]; number: number }) => {
  selectName.value = data.name
  tableData2.value = reverse(orderBy(data.data, 'value'))
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.orderBody-item {
  transition: all 0.5s;
  border-radius: 1rem;
  &:hover {
    cursor: pointer;
    background-color: #0a577b
    // background: linear-gradient(90deg, #0a577b, #0000);
  }
   &:active{
    cursor: pointer;
    background-color: #0000;
    // background: linear-gradient(90deg, #0a577b, #0000);
  }
}
</style>
